<template>
  <KFlex class="goods-order-nav">
    <KFlexItem v-for="menu in menus" :key="menu.id">
      <KView class="goods-order-nav-item" @click="menuClick(menu)">
        <KView class="goods-order-nav-item-label">{{menu.label}}</KView>
        <KView v-if="selectMenu===menu.id" class="goods-order-nav-item-line"></KView>
      </KView>
    </KFlexItem>
    <KFlexItem></KFlexItem>
    <KFlexItem></KFlexItem>
  </KFlex>
</template>

<script>
  export default {
    props: {
      selectMenu: {
        type: String,
        required: true
      }
    },

    data() {
      return {
        menus: [{
          label: '全部订单',
          id: 'all'
        }, {
          label: '待付款',
          id: 'toPay'
        }
        // , {
        //   label: '待发货',
        //   id: '2'
        // }, {
        //   label: '待收货',
        //   id: '3'
        // }
        ]
      };
    },

    methods: {
      menuClick(menu) {
        let id = menu.id;
        if (this.selectMenu === id) {
          return;
        }

        this.$emit('update:selectMenu', id);
        this.$emit('change', id, menu);
      }
    }
  };

</script>

<style lang="scss">
  .goods-order-nav {
    height: formatPx(110);
    background: #59c264;
    color: #ffffff;
    font-size: formatPx(28);

    .goods-order-nav-item {
      padding-top: formatPx(25);
      height: calc(100% - #{formatPx(25)});

      .goods-order-nav-item-label {
        height: formatPx(60);
        line-height: formatPx(60);
        text-align: center;
      }

      .goods-order-nav-item-line {
        height: formatPx(4);
        width: formatPx(50);
        background: #ffffff;
        margin: auto;
        border-radius: formatPx(2);
        margin-top: formatPx(-2);
      }
    }
  }

</style>
